<template>
  <div>
    <div id="handle">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
          <el-input
            v-model="formInline.user"
            placeholder="请输入搜索新闻标题"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-plus"
            dialogVisible
            @click="add"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 弹框 -->
      <el-dialog
        :title="titleChange"
        :visible.sync="dialogVisible"
        width="70%"
        top="20px"
      >
        <el-form
          :rules="rules"
          ref="ruleForm"
          :model="ruleForm"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="新闻标题" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>

          <el-form-item label="新闻作者" prop="author" style="margin-top: 20px">
            <el-input v-model="ruleForm.author"></el-input>
          </el-form-item>
          <el-form-item label="发布时间" required>
            <el-col :span="11">
              <el-form-item>
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.date"
                  style="width: 100%"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="是否上架">
            <el-switch
              v-model="ruleForm.delivery"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </el-form-item>
          <quill-editor
            class="editor"
            ref="myTextEditor"
            v-model.trim="ruleForm.content"
          ></quill-editor>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addNews">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div id="content1">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @cell-click="editNews"
      >
        <el-table-column prop="title" label="标题" align="center">
        </el-table-column>
        <el-table-column prop="author" label="作者" align="center">
        </el-table-column>
        <el-table-column prop="date" label="时间" align="center">
        </el-table-column>
        <el-table-column prop="edit" label="操作" align="center">
          <el-button class="el-icon-edit" type="primary">编辑</el-button>
          <el-button class="el-icon-delete" type="danger">删除</el-button>
        </el-table-column>
      </el-table>
    </div>
    <div id="footer">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  addNewsApi,
  searchNewsApi,
  editNewsApi,
  deleteNewsApi,
} from "../api/news.js";
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      titleChange: "添加新闻",
      arr: {},
      id: "",
      //总的新闻个数
      total: 1,
      //每一页的条数
      pageSize: 2,
      //弹窗的显示条件
      dialogVisible: false,
      //当前的页数
      currentPage: 1,
      ruleForm: {
        title: "",
        author: "",
        date: "",
        delivery: "1",
        content: "",
      },
      //表单验证规则
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        author: [
          { required: true, message: "请输入作者", trigger: "blur" },
          { min: 1, max: 6, message: "长度在 1 到 6 个字符", trigger: "blur" },
        ],
      },
      tableData: [],
    };
  },
  mounted() {
    this.getNewsList();
  },
  methods: {
    async getNewsList() {
      let res = await searchNewsApi({
        params: {
          limit: this.pageSize,
          page: this.currentPage,
        },
      });
      let data = res.data;
      this.total = res.data[0];
      data.shift();
      this.tableData = data;
      console.log(144, this.tableData);
    },
    add() {
      this.ruleForm = {
        title: "",
        author: "",
        date: "",
        delivery: "1",
        content: "",
      };
      this.dialogVisible = true;
    },
    async addNews() {
      console.log(this.ruleForm);
      if (this.titleChange == "添加新闻") {
        this.$refs.ruleForm.validate(async (valid) => {
          console.log("1111");
          if (valid) {
            console.log("222");
            let res = await addNewsApi({
              data: this.ruleForm,
            });
            console.log(179, res);
            console.log("333333");
            if (res.code == 200) {
              this.$message({
                message: "添加新闻成功！",
                type: "success",
              });
              this.dialogVisible = false;
            } else {
              this.$message.error("添加错误，请重新添加！");
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else {
        this.arr = {
          author: this.ruleForm.author,
          title: this.ruleForm.title,
          date: this.ruleForm.date,
          content: this.ruleForm.content,
        };
        let res = await editNewsApi({
          params: { id: this.id },
          data: this.arr,
        });
        if (res.code == 200) {
          alert("修改成功");
          this.dialogVisible = false;
        }
      }
    },
    //每一次分页跳转时触发的函数
    currentChange(page) {
      this.currentPage = page;
      this.getNewsList();
    },
    async editNews(row, column, cell, event) {
      if (event.target.innerText == "编辑") {
        this.dialogVisible = true;
        this.titleChange = "修改新闻";
        this.ruleForm = {
          title: row.title,
          author: row.author,
          date: row.date,
          delivery: "1",
          content: row.content,
        };
        this.id = row.id;
      } else {
        let res = await deleteNewsApi({
          params: { id: row.id },
        });
        if (res.code == 200) {
          alert("删除成功");
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
#handle {
  margin-top: 20px;
  margin-left: 50px;
}
#content1 {
  margin-left: 50px;
  margin-top: 50px;
  width: 80vw;
}
#footer {
  margin-top: 20px;
  text-align: right;
}
</style>      